<!--Copyright to Shen Huang, you can reach me out at shenhuang@live.ca-->

<!DOCTYPE html>

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

<html>

	<head>

		<title>ARTICLES</title>

		<style>

			A							{
				text-decoration				:	none;
			}

			body						{
						background-image	:	url("star.jpg");
			}
			.buttonimg					{
						max-width			:	200px;
			}
			.articleimg					{
						max-height			:	100%;
						max-width			:	100%;
			}
			.article					{
						background			:	#1e4d9e;
						border-radius		:	10px;
						border				:	3px;
						border-style		:	solid;
						border-color		:	#a6c7ff;
						margin				:	20px;
						padding				:	5px;
			}
			@media screen and (max-width: 600px)	{
				.article				{
					width				:	80%;
				}
			}
			@media screen and (min-width: 600px)	{
				.article				{
					width				:	600px;
				}
			}
			.title						{
						font-family			:	Lucida Grande;
						font-size			:	30px;
						font-weight			:	bold;
						color				:	#e8e8e8;
						opacity				:	0.9;
			}
			.subtitle						{
						font-family			:	Lucida Grande;
						font-size			:	16px;
						font-weight			:	bold;
						color				:	#e8e8e8;
						opacity				:	0.4;
			}

		</style>

	</head>

	<body>

		<div class = "article">
			<a href = "https://medium.com/front-end-weekly/how-to-add-some-fireworks-to-your-website-18b594b06cca?source=---------22------------------">
				<div class = "title">
					how to add some FIREWORKS to your website
				</div>
				<img class = "articleimg" src = "./ca/1_bSm8aR2aErVexzk2auvL2g.jpeg">
				<div class = "subtitle">
					
				</div>
			</a>
		</div>

		<div class = "article">
			<a href = "https://medium.com/front-end-weekly/how-to-add-some-bubbles-to-your-website-8c51b8b72944">
				<div class = "title">
					how to add some BUBBLES to your website
				</div>
				<img class = "articleimg" src = "./ca/1_vd5e4CYhncSfJXzno1mp4g.jpeg">
				<div class = "subtitle">
					
				</div>
			</a>
		</div>

		<div class = "article">
			<a href = "https://medium.com/front-end-weekly/how-to-fill-your-website-with-lovely-valentines-hearts-d30fe66d58eb">
				<div class = "title">
					how to fill your website with lovely VALENTINES HEARTS
				</div>
				<img class = "articleimg" src = "./ca/1_XLjt_KP95fUgH1XOiLDu1w.jpeg">
				<div class = "subtitle">
					Trinkets, roses and sweets, you can smell the love spreading in the air. It is again close to one of the most romantic holidays of the year. Today I will show you a way to cultivate your website with some lovely atmosphere. Coding is easy, so have no fear.
				</div>
			</a>
		</div>

		<div class = "article">
			<a href = "https://medium.com/free-code-camp/how-to-create-beautiful-lanterns-that-arrange-themselves-into-words-da01ae98238">
				<div class = "title">
					how to create beautiful LANTERNS that ARRANGE THEMSELVES into words
				</div>
				<img class = "articleimg" src = "./ca/1_YOMF0w7NSWU28TH3ViWoNA.jpeg">
				<div class = "subtitle">
					
				</div>
			</a>
		</div>

		<div class = "article">
			<a href = "https://medium.com/free-code-camp/how-to-drop-leprechaun-hats-into-your-website-with-computer-vision-b0d115a0f1ad">
				<div class = "title">
					how to drop LEPRECHAUN-HATS into your website with COMPUTER VISION
				</div>
				<img class = "articleimg" src = "./ca/1_kfqTx__agnemI2s0kRd3rw.jpeg">
				<div class = "subtitle">
					Automatically leprechaun-hat people on your website for St. Patrick’s Day.
				</div>
			</a>
		</div>

	</body>

	<script>
	</script>

</html>